<template>
  <div class="hotArList">
    <ul>
      <li v-for="item in hotArtists" :key="item.id">
        <router-link :to="{ name: 'Search', params: { keyword: item.name } }">
          <div
            class="img"
            :style="{ 'background-image': 'url(' + item.picUrl + ')' }"
          ></div>
          <p>{{ item.name }}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    hotArtists: Array,
  },
};
</script>

<style lang="less" scoped>
.hotArList {
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 16vw;
      margin-bottom: 10px;
      margin-top: 5px;
      .img {
        width: 16vw;
        height: 16vw;
        background-size: cover;
        background-position: center;
        border-radius: 4vw;
      }
      p {
        font-size: 12px;
        color: #555;
        margin-top: 3px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
<style>
.hotArList ul li:not(:nth-child(5n)) {
  margin-right: calc((100% - 80vw) / 4);
}
</style>